<template>
  <div class="authentication"> 
    <div class="title">
      <span
        ><img
          @click="toBack"
          width="22px"
          height="22px"
          src="../../../ej_customer/static/img/back.png"
          alt=""
        /> </span>实名认证
    </div>
    <div class="tip">
      <div class="icon">
        <img src="../../../ej_customer/static/img/security.png" alt="" />
      </div>
      <p class="tip1">进行实名认证</p>
      <p class="tip2">用于保障账号的安全及快速接收订单信息</p>
    </div>
    <div class="form">
      <van-form>
        <van-field
          v-model="form.realname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
        />
        <van-field
          v-model="form.idCard"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />
        <van-field
          v-model="form.bankCard"
          name="银行卡号"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />
        <van-field name="uploader" label="身份证正面照">
          <template #input>
            <van-uploader
              :after-read="afterRead1"
              v-model="fileList1"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field name="uploader" label="身份证反面照">
          <template #input>
            <van-uploader
              :after-read="afterRead2"
              v-model="fileList2"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field name="uploader" label="银行卡照片">
          <template #input>
            <van-uploader
              :after-read="afterRead3"
              v-model="fileList3"
              :max-count="1"
            />
          </template>
        </van-field>
        <div class="btn" @click="submitHandler">提交</div>
      </van-form>
    </div>
  </div>
</template>

<script>
import {post_formData,post} from '../../http/axios'
import {Toast} from 'vant'
export default {
    name: 'demo',
    props: {},
    data() {
        return {
            form:{
              realname:'',
              idCard:'',
              bankCard:'',
              idcardPhotoPositive:'',
              idcardPhotoNegative:'',
              bankCardPhoto:''
            },
            fileList1:[],
            fileList2:[],
            fileList3:[]
            }
        },
    computed:{

    },
    watch:{

    },
    methods: {
        toBack(){
            this.$router.push({path:'/manager/mine'})
        },
        afterRead1(file, detail) {
            console.log(this.dataURLtoFileFun(file.content));
            let formData = new FormData();

            formData.append('file',this.dataURLtoFileFun(file.content,'file.jpg'))

            post_formData('http://121.199.29.84:8001/file/upload',formData).then(res=>{
                console.log(res.data);
                if(res.data.status === 200){
                    this.form.idcardPhotoPositive='http://121.199.29.84:8888/'+res.data.data.groupname+'/'+
                    res.data.data.id
                    this.fileList1 =[{url:'http://121.199.29.84:8888/'+res.data.data.groupname+'/'+res.data.data.id}]
            }
            })
        },
        afterRead2(file, detail) {
            console.log(this.dataURLtoFileFun(file.content));
            let formData = new FormData();

            formData.append('file',this.dataURLtoFileFun(file.content,'file.jpg'))

            post_formData('http://121.199.29.84:8001/file/upload',formData).then(res=>{
                console.log(res.data);
                if(res.data.status === 200){
                    this.form.idcardPhotoNegative='http://121.199.29.84:8888/'+res.data.data.groupname+'/'+res.data.data.id
                    this.fileList2 =[{url:'http://121.199.29.84:8888/'+res.data.data.groupname+'/'+res.data.data.id}]
                }
            })
            },
        afterRead3(file, detail) {
            console.log(file);
            let formData = new FormData();

            formData.append('file',this.dataURLtoFileFun(file.content,'file.jpg'))

                post_formData('http://121.199.29.84:5588/file/upload',formData).then(res=>{
                    console.log(res.data);
                    if(res.data.status === 200){
                        this.form.bankCardPhoto='http://121.199.29.84:8888/'+res.data.data.groupname+'/'+res.data.data.id
                        this.fileList3 =[{url:'http://121.199.29.84:8888/'+res.data.data.groupname+'/'+res.data.data.id}]
            }
            })

        },
        dataURLtoFileFun(dataurl,filename){
            let arr =dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);

            }
            return new File([u8arr],filename,{type:mime});

        },
        submitHandler(){
            this.form.userId = this.$route.query.id
            // console.log(this.form.userId);
            console.log(this.form);
            post('/certification/submitCertificationApply',this.form).then(res=>{
                console.log(res.data.status);
                if(res.data.status === 200){
                    Toast(res.data.message)
                    this.$router.push('/manager/mine')
                }else{
                    Toast(res.data.message)
                }
            })
        }

    },
    created() {
        
    },
    mounted() {
        
    },
    beforeDestroy() {
        
    },
    destroyed() {
        
    },
}
</script>

<style scoped>
.authentication .title {
    height: 58px;
    background-image: linear-gradient(to right,#BF73FF,#7579FF);
    text-align: center;
    line-height: 58px;
    color: #fff;
    letter-spacing: .2em;
}
.authentication .title span {
 float:left;
 margin-left:1em;
 margin-top:5px;
 cursor: pointer;
 }
 .tip .icon {
 width: 100px;
 height: 100px;
 margin: 0 auto;
 margin-top: 1em;
 border-radius: 50%;
 background-color: #ddfae7;
 }
 .tip .icon img {
 width: 98%;
 height: 98%;
 }
 .tip .tip1 {
 width: 50%;
 margin: 0 auto;
 text-align: center;
 margin-top: 1em;
 color: black;
 font-weight: 300;
 }
 .tip .tip2 {
 width: 80%;
 margin: 0 auto;
 text-align: center;
 margin-top: 1em;
 color: #999;
 font-weight: 300;
 font-size: 12px;
 letter-spacing: .1em;
 }
 .form {
 margin-top: 2em;
 padding: 0 .5em;
 height: 650px;
 }
 .form .btn {
 height: 42px;
 background-image: linear-gradient(to
right,#BF73FF,#7579FF);
 margin: 16px;
 border-radius: 5px;
 text-align: center;
 line-height: 42px;
 color: #fff;
 font-size: 14px;
 letter-spacing: .2em;
 cursor: pointer;
 }

</style>